<template>
    <div class="nav flex justify-content">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/backstage' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item,index) in $route.meta" :key="index">
                {{item}}
            </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="flex algin-center">
            <el-avatar :size="50" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
            <el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">修改密码</el-dropdown-item>
                    <el-dropdown-item command="b">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Navbar',
        data() {
            return {
                levelList:null
            }
        },
        methods:{
            handleCommand(command){
                if (command==='a'){

                }else {
                    this.layOut()
                }
            },
            layOut(){
                this.$confirm('是否要退出登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   localStorage.removeItem('token')
                    this.$store.commit('deleteToken')
                    this.$message({
                        message: '退出成功',
                        type: 'success'
                    });
                    this.push({
                        name:'Login'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消退出'
                    });
                });
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .nav
        width 100%
        height 60px
        line-height 60px
        box-sizing border-box
        padding 0 20px
    .el-breadcrumb
        font-size 18px
        height 60px
        line-height 60px
</style>
